<template>
	<view class="page-root-bg">
		<!-- #ifdef APP-PLUS || H5 -->
		<view style="position: fixed;top: 0;width: 100%;z-index: 9999;"
			:style="{'backgroundColor':barColor?barColor:'','height':ttop}"></view>
		<view :style="{'backgroundColor':barColor?barColor:'','padding-top':ttop}"></view>
		<!-- #endif -->
		<header-view :title="'我的'" :showLeft="false"></header-view>
		<scroll-view class="content-box" scroll-y :style="{'height':contentHeight}">
			<!-- 我的信息 begin -->
			<view class="mine-info">
				<view class="info">
					<image
						:src="userInfo.avatar?$config.staticDomainURL+userInfo.avatar:'/static/img/mine/defalut-avatar.png'"
						class="avatar"></image>
					<view class="base-info">
						<view class="auth-info">
							<view class="name">{{userInfo.representativeName}}</view>
							<navigator class="auth" url="/pages/committee/mine/certification">认证</navigator>
						</view>
						<view class="role">
							{{userInfo.representativeDuty}}
						</view>
					</view>
				</view>
				<view class="setup">
					<image src="/static/img/mine/setup.png" class="setup-img"></image>
				</view>
			</view>
			<!-- 我的信息 end -->
			<!-- 通知公告 begin -->
			<view class="content-item mine-list">
				<view class="row">
					<view class="grid" v-for="(item,index) in itemData" :key="index" @click="itemClick(item)">
						<view class="item">
							<image :src="item.icon"></image>
							<view class="title">
								{{item.title}}
							</view>
						</view>
						<view class="arrow">&gt;</view>
					</view>
				</view>
			</view>
			<!-- 通知公告 end -->
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				barColor: getApp().globalData.barColor,
				ttop: getApp().globalData.ttop,
				contentHeight: getApp().globalData.winHeight,

				itemData: [{
					title: '消息列表',
					icon: '/static/img/mine/message.png',
					url: '/pages/message/index'
				}, {
					title: '积分记录',
					icon: '/static/img/mine/integral.png',
					url: '/pages/mine/integral'
				}, {
					title: '退出登录',
					icon: '/static/img/mine/out-login.png',
					url: '/pages/login/index'
				}]
			}
		},
		onLoad() {
			this.getUserInfo()
		},
		onPullDownRefresh() {
			this.getUserInfo()
			uni.stopPullDownRefresh()
		},
		methods: {
			itemClick(item) {
				this.$jump.toJump(item.url)
			},

			getUserInfo() {
				this.$api.login.getUserInfo({}).then((res) => {
					console.log(res, "userInfo============");
					if (res.code == 200) {
						this.userInfo = res.result
					} else {
						this.$modal.toast(res.message)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-root-bg {
		width: 100vw;
		height: 100vh;
		background: url('@/static/img/bg.png');
		background-size: 100% 100%;

		.content-box {
			width: 100%;
			height: 88%;
			padding: 20rpx;
		}
	}

	.mine-info {
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #FFF;

		.info {
			display: flex;
			align-items: center;

			.avatar {
				width: 150rpx;
				height: 150rpx;
				border-radius: $border-radius-circle;
				background: #FFF;
			}

			.base-info {
				display: flex;
				flex-direction: column;
				margin-left: 30rpx;

				view {
					margin: 10rpx;
				}

				.auth-info {
					display: flex;
					flex-direction: row;
					margin: 0;

					.name {
						font-size: $font-size-extra-lg;
					}

					.auth {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 120rpx;
						margin: 10rpx 0;
						background-image: url(@/static/img/mine/auth-bg.png);
						background-size: 100% 100%;
						color: #b27a2f;
					}
				}
			}
		}

		.setup-img {
			width: 45rpx;
			height: 40rpx;
		}
	}


	.mine-list {
		width: 100%;
		background-color: $bg-color-white;
		padding: 20rpx 40rpx;
		margin: 40rpx 0;
		border-radius: $border-radius-lg;

		.row {
			.grid {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 24rpx 0;

				.item {
					display: flex;
					align-items: center;
				}

				image {
					width: 30rpx;
					height: 30rpx;
					margin-bottom: 0;
				}

				.title {
					align-items: center;
					font-size: $font-size-lg;
					margin-left: 30rpx;
				}

				.arrow {
					margin-top: -10rpx;
					font-size: $font-size-lg;
					color: #ababab;
				}
			}
		}
	}
</style>